<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <title>九宫格转盘</title>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <meta name="description" content="">
  <style type="text/css">
    html {
      font-family: PingFang-SC-Light, Microsoft YaHei, \\5FAE\8F6F\96C5\9ED1, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
      text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }

    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    code,
    form,
    fieldset,
    legend,
    input,
    textarea,
    select,
    p,
    blockquote,
    th,
    td,
    hr,
    button,
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
      margin: 0;
      padding: 0
    }

    body {
      color: #434343;
      background-color: white;
      height: 100%;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }

    ul,
    ol {
      list-style: none outside none;
    }

    #lottery {
      width: 12.31rem;
      height: 10.6rem;
      margin: 1.62rem auto 0;
      padding: 0.3rem 0.41rem;
      box-sizing: border-box;
    }

    #lottery ul {
      font-size: 0;
    }

    #lottery ul li {
      width: 3.71rem;
      height: 3.2rem;
      background: #f9d933;
      border-radius: 0.26rem;
      margin-right: 0.17rem;
      margin-bottom: 0.17rem;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      color: #1b1b1b;
    }

    #lottery ul li.alone p {
      line-height: 1.37rem
    }

    #lottery ul li p {
      height: 1.37rem;
      line-height: 0.64rem;
      font-size: 0.6rem;
      margin: 0.92rem auto;
    }

    #lottery ul li.lottery-go {
      background: #eb450e;
      color: #f9d933;
      cursor: pointer;
    }

    #lottery ul li.lottery-go p {
      font-size: 1.6rem;
    }

    #lottery ul li.active.lottery-unit {
      background: #4699fa;
      color: #fff;
    }

    #lottery ul li:last-of-type {
      margin-right: 0;
    }

    #lottery ul:last-of-type li {
      margin-bottom: 0;
    }
  </style>

  <script>!function (e) {
      function t(i) {
        if (n[i]) return n[i].exports; var o = n[i] = {
          exports: {
          }, id: i, loaded: !1
        }; return e[i].call(o.exports, o, o.exports, t), o.loaded = !0, o.exports
      } var n = {
      }; return t.m = e, t.c = n, t.p = "", t(0)
    }([function (e, t) {
      "use strict"; !function (e) {
        function t() {
          var t = a.getBoundingClientRect().width; t / n > 540 && (t = 540 * n), e.rem = t / 16, a.style.fontSize = e.rem + "px"
        } var n, i, o, r = window.document, a = r.documentElement, d = r.querySelector('meta[name="viewport"]'); if (d) {
          var s = d.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/); s && (i = parseFloat(s[2]), n = parseInt(1 / i))
        } else d = r.createElement("meta"), d.setAttribute("name", "viewport"), d.setAttribute("content", "width=device-width, initial-scale=1, user-scalable=no, minimal-ui"), a.firstElementChild.appendChild(d); e.addEventListener("resize", function () {
          clearTimeout(o), o = setTimeout(t, 300)
        }, !1), e.addEventListener("pageshow", function (e) {
          e.persisted && (clearTimeout(o), o = setTimeout(t, 300))
        }, !1), "complete" === r.readyState ? r.body.style.fontSize = 12 * n + "px" : r.addEventListener("DOMContentLoaded", function () {
          r.body.style.fontSize = 12 * n + "px"
        }, !1), t()
      }(window)
    }]);</script>
</head>

<body>
  <div id="lottery" class="NotoSansHans-Regular">
    <ul>
      <li class="lottery-unit  lottery-unit-0">
        <p><span class="RenaultLife-Bold">1000</span>元<br>现金</p>
      </li>
      <li class="lottery-unit alone lottery-unit-1">
        <p>抱枕</p>
      </li>
      <li class="lottery-unit lottery-unit-2">
        <p><span class="RenaultLife-Bold">100</span>元<br>京东卡</p>
      </li>
    </ul>
    <ul>
      <li class="lottery-unit alone lottery-unit-7">
        <p>谢谢参与</p>
      </li>
      <li class="lottery-go alone">
        <p>Go</p>
      </li>
      <li class="lottery-unit lottery-unit-3">
        <p><span class="RenaultLife-Bold">1000</span>元<br>现金</p>
      </li>
    </ul>
    <ul>
      <li class="lottery-unit lottery-unit-6">
        <p><span class="RenaultLife-Bold">100</span>元<br>京东卡</p>
      </li>
      <li class="lottery-unit alone lottery-unit-5">
        <p>谢谢参与</p>
      </li>
      <li class="lottery-unit alone lottery-unit-4">
        <p>抱枕</p>
      </li>
    </ul>
  </div>

</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  var lottery = {
    index: -1,    //当前转动到哪个位置，起点位置
    count: 0,    //总共有多少个位置
    timer: 0,    //setTimeout的ID，用clearTimeout清除
    speed: 20,    //初始转动速度
    times: 0,    //转动次数
    cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: -1,    //中奖位置
    init: function (id) {
      if ($("#" + id).find(".lottery-unit").length > 0) {
        $lottery = $("#" + id);
        $units = $lottery.find(".lottery-unit");
        this.obj = $lottery;
        this.count = $units.length;
        $lottery.find(".lottery-unit-" + this.index).addClass("active");
      };
    },
    roll: function () {
      var index = this.index;
      var count = this.count;
      var lottery = this.obj;
      $(lottery).find(".lottery-unit-" + index).removeClass("active");
      index += 1;
      if (index > count - 1) {
        index = 0;
      };
      $(lottery).find(".lottery-unit-" + index).addClass("active");
      this.index = index;
      return false;
    },
    stop: function (index) {
      this.prize = index;
      return false;
    }
  };

  function roll() {
    lottery.times += 1;
    lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
    if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
      clearTimeout(lottery.timer);
      lottery.prize = -1;
      lottery.times = 0;
      click = false;
    } else {
      if (lottery.times < lottery.cycle) {
        lottery.speed -= 10;
      } else if (lottery.times == lottery.cycle) {
        var index = Math.random() * (lottery.count) | 0;
        //随机位置赋值，若是接口请求确定好位置 这块需要去掉
        lottery.prize = 2;
      } else {
        if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
          lottery.speed += 110;
        } else {
          lottery.speed += 20;
        }
      }
      if (lottery.speed < 40) {
        lottery.speed = 40;
      };
      lottery.timer = setTimeout(roll, lottery.speed);//循环调用
    }
    return false;
  }

  var click = false;
  $(function () {
    lottery.init('lottery');
    $("#lottery .lottery-go").click(function () {
      if (click) {//click控制一次抽奖过程中不重复点击
        return false;
      } else {
        lottery.speed = 100;
        roll();    //转圈完成 click为false、可继续抽奖
        click = true; //设置click为true，转圈过程不响应click事件
        return false;
      }
    })
  })
</script>

</html>